<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>在线办公系统</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script th:src="@{/js/jquery.form.js}"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
    <link th:href="@{/css/index.css}" rel="stylesheet" type="text/css">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
    <style>

        body {
            overflow-x: hidden;
            overflow-y: hidden;
        }

        .container-fluid {
            position: absolute;
            width: 100%;
            top: 0;
            bottom: 0;
            background: bisque;
        }

        .row-main {
            height: 100%;
        }

        .my-info {
            width: 100%;
            height: 200px;
            text-align: center;
        }

        .left-panel {
            background: #42acba;
        }

        .main-panel {
            height: 100%;
            padding: 0;

        }

        #left-nav > a {
            height: 100px;
            font-size: 30px;
            line-height: 100px;
            padding: 0;
            padding-left: 30px;
        }

        #left-nav > a img {
            vertical-align: text-top;
            width: 45px;
            height: 45px;
        }

        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }

        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }

        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }

    </style>

    <script>

        $(document).ready(function () {
            //更新用户信息后的反馈
            $("#saveInfo").click(function () {

                $("#avatarInput").each(function(){
                    if($(this).val()==="") {
                        $("#userInfoForm").attr("action", "/api/users/updateUserInfo");
                    }else{
                        $("#userInfoForm").attr("action", "/api/users/update");
                    }
                    $("#userInfoForm").submit();
                });
            });
            $("#userInfoForm").ajaxForm(function (data) {
                if (data.success) {
                    $("#myInfoModal").modal("hide");
                    $("#resultMsg").html("更新用户信息成功！");
                    $('#resultModal').modal('show');

                    //更新局部信息
                    $("#userInfo").load("/api/users/updateView");
                }
            });
            $("#logoutBtn").click(function () {
                $("#logoutBtn").modal("hide");
                $.get("/logout",function (data) {
                    if(data.success){
                        window.location.href = "/index";
                    }
                });
            });

            $("#avatarInput").change(function () {
                $("#avatarImg").attr("src", URL.createObjectURL($(this)[0].files[0]));
            });
        });
    </script>
</head>
<body>

<div class="container-fluid">
    <div class="row row-main">
        <div class="left-panel col-2">
            <div class="my-info mb-2 mt-3 text-center rounded bg-white" id="userInfo">
                <div th:fragment="userInfo">
                    <img id="userAvatar" class="my-avatar rounded-circle mb-2 mt-3"
                         th:src="@{/api/files/{fileId}(fileId=${user.avatar})}" style="width: 100px;height: 100px;"
                         alt="暂无用户头像">
                    <br>

                    <span class="my-name" th:text="${user.nickName}" id="userNickName">鲁班七号</span>
                    <br>
                    <a href="" class="mt-2" target="M_iframe" data-toggle="modal" data-target="#myInfoModal"><span
                            class="badge badge-pill bg-warning" style="color: white">个人信息</span></a>
                    <a href="/team" class="mt-2" target="M_iframe"><span
                            class="badge badge-pill badge-primary">小组管理</span></a>

                </div>
            </div>
            <div class="list-group" id="left-nav">
                <a href="/inform" target="M_iframe" class="list-group-item list-group-item-action"><img
                        src="/img/ic_inform.png"/>&nbsp;&nbsp;<span>通知</span></a>
                <a href="/task" target="M_iframe" class="list-group-item list-group-item-action"><img
                        src="/img/ic_task.png"/>&nbsp;&nbsp;<span>任务</span></a>
                <a href="/file" target="M_iframe" class="list-group-item list-group-item-action"><img
                        src="/img/ic_file.png"/>&nbsp;&nbsp;<span>文件</span></a>
                <a href="/message" target="M_iframe" class="list-group-item list-group-item-action"><img
                        src="/img/ic_message.png"/>&nbsp;&nbsp;<span>留言</span></a>
                <a href="" target="M_iframe" data-toggle="modal" data-target="#logoutModal"
                   class="list-group-item list-group-item-action"><img
                        src="/img/ic_logout.png"/>&nbsp;&nbsp;<span>登出</span></a>
            </div>
        </div>

        <div class="main-panel col-10">

            <iframe src="http://www.baidu.com" style="width: 100%;height: 100%;" frameborder="0" name="M_iframe">

            </iframe>
        </div>

        <div class="modal fade" id="myInfoModal" l="-1" role="dialog" aria-labelledby="myInfoModalLabel"
             aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">我的信息</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <form id="userInfoForm" th:action="@{/api/users/update}" method="post" th:object="${userForm}"
                              enctype="multipart/form-data">
                            <input hidden name="userId" th:value="${user.userId}">
                            <div class="form-group">
                                <label>头像</label>

                                <img class="rounded-circle  ml-3" id="avatarImg" style="width: 100px;height: 100px;" alt="头像不见了"
                                     th:src="@{/api/files/{fileId}(fileId=${user.avatar})}">
                                <a href="javascript:;" class="file">更换头像
                                    <input type="file" name="file" id="avatarInput" accept="image/*">
                                </a>
                            </div>
                            <div class="form-group">
                                <label>名字</label>
                                <input type="text" name="nickName" th:value="${user.nickName}"
                                       class="form-control d-inline-block col-4 ml-3" placeholder="输入名字">
                            </div>
                            <div class="form-group">
                                <label>性别</label>
                                <span class="ml-3">
                                        <input type="radio" aria-label="Radio button for following text input"
                                               name="gender" value="0" th:checked="${user.gender==0}">
                                        <i class="fa fa-mars" aria-hidden="true" style="color: #42acba"></i>
                                    </span>
                                <span class="ml-3">
                                        <input type="radio" aria-label="Radio button for following text input"
                                               name="gender" value="1" th:checked="${user.gender==1}">
                                        <i class="fa fa-venus" aria-hidden="true" style="color: hotpink"></i>
                                    </span>
                            </div>
                            <div class="form-group">
                                <label>格言</label>
                                <textarea class="form-control" placeholder="输入格言" name="slogan"
                                          th:text="${user.slogan}"></textarea>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                                <button type="button" class="btn btn-primary" id="saveInfo">保存</button>
                            </div>
                        </form>
                    </div>

                </div>
            </div>
        </div>


        <div class="modal fade" id="logoutModal" l="-1" role="dialog" aria-labelledby="logoutModalLabel"
             aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">确定要登出吗？</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal" id="logoutBtn">登出</button>
                    </div>
                </div>
            </div>
        </div>

        <div th:replace="alert :: alertFragment"></div>
    </div>
</div>


<script>
    $(document).ready(function () {
        $("#left-nav .list-group-item").click(function (e) {
            $("#left-nav .list-group-item").removeClass("list-group-item-primary");
            $(this).addClass("list-group-item-primary");
        });
    })
</script>
</body>
</html>